<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <p>点击打头信息</p>
    <div>
        <span id="name" ></span>
        <span id="sex"></span>
        <span id="age"></span>
    </div>
    <button type="button" value="">查询所有</button>
    <table width="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>
  <script>
      <!--JSON  字符串-->
      var datou = {
          'name':'吴佳煜',
          'sex':'女',
          'age':'18'
      }

      $("p").click(function () {
          //alert(datou.name)
          $("#name").append(datou.name)
          $("#sex").append(datou.sex)
          $("#age").append(datou.age)
      })

      var student = [
          {
              'name':'吴佳煜',
              'sex':'女',
              'age':'18'
          },
          {
              'name':'朱晓燕',
              'sex':'女',
              'age':'20'
          },
          {
              'name':'张熊',
              'sex':'男',
              'age':'78'
          }
      ]
      var showAllStudent = 0;
      $('button').click(function () {
          if(showAllStudent == 0){
              for (let i = 0; i < student.length; i++) {
                  console.log(student[i].name)
                  $('table').append(`<tr><td>`+student[i].name+
                      `</td><td>`+student[i].sex+
                      `</td><td>`+student[i].age+
                      `</td></tr>`)
              }
              showAllStudent ++;
          }
      })

  </script>
</body>
</html>
